import { Button, message, Popconfirm, Tree, type TreeDataNode } from 'antd'
import '../../assets/css/Building/buildingCss.less'
import { DownOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import type { buildingsList, editContentFace, paraentDataFace } from '../../type/building'
import { buildingList, deleteBuilding } from '../../apis/building';
import { transformBuildingData } from '../../utils/tree';
import AddDiaLog from '../../component/building/AddDiaLog';
import AddChild from '../../component/building/AddChild'

function building() {
    const [treeData, setTreeData] = useState<TreeDataNode[]>([])
    const [menuList, setMenus] = useState<buildingsList[]>([])
    const [openAdd, setOpenAdd] = useState<boolean>(false)
    const [editContent, setEditContent] = useState<editContentFace>({})
    const [openAddChild, setOpenAddChild] = useState<boolean>(false)
    const [paraentData,setParaentData] = useState<paraentDataFace>({})
    useEffect(() => {
        GetList()
    }, [])

    const GetList = async () => {
        const res = await buildingList()
        setMenus(res.data.list)
    }

    useEffect(() => {
        let res = transformBuildingData(menuList)
        setTreeData(res as TreeDataNode[])
    }, [menuList])
    // 传给子组件 判断什么时间进行刷新数据
    const refresh = () => {
        setOpenAdd(false)
        setEditContent({ ...editContent, id: 0, pid: 0 }); // 重置 id
        GetList()
    }

    const confirm = (id: number) => async () => {
        // 可在此处调用删除接口
        let res = await deleteBuilding(id);
        if (res.errCode == 10000) {
            message.success('删除成功')
            GetList()
        } else {
            message.error('删除失败')
        }
    };
    // 添加子节点的弹窗关闭函数
    const refreshChild = () => {
        setOpenAddChild(false)
        GetList()
        setParaentData({...paraentData,id:0,name:''})
    }
    // 修改节点
    const edit = (id: number, name: string, pid?: number) => {
        setOpenAdd(true)
        setEditContent({ ...editContent, id, content: name, pid })
    }
    // 自定义节点标题渲染
    const titleRender = (nodeData: TreeDataNode) => {
        return (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '500px' }}>
                <span>
                    {typeof nodeData.title === 'function' ? nodeData.title(nodeData) : nodeData.title}
                </span>
                <div>
                    <Button
                        type="primary"
                        onClick={() => {
                            const title = typeof nodeData.title === 'string' ? nodeData.title : '未命名';
                            setOpenAddChild(true)
                            setParaentData({...paraentData,id:Number(nodeData.key),name:title})
                        }}
                    >
                        添加子组件
                    </Button>
                    <Button
                        variant="solid"
                        color='green'
                        type="primary"
                        style={{ marginLeft: 10 }}
                        onClick={() => {
                            const title = typeof nodeData.title === 'string' ? nodeData.title : '未命名';
                            // 传递 pid 参数
                            edit(Number(nodeData.key), title, nodeData.pid as number);
                        }}
                    >
                        修改
                    </Button>
                    <Popconfirm
                        title="提示"
                        description="你确定要删除这条数据吗?"
                        onConfirm={confirm(Number(nodeData.key))}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button
                            variant="solid"
                            color='red'
                            style={{ marginLeft: 10 }}
                            type="primary"
                        >
                            删除
                        </Button>
                    </Popconfirm>
                </div>
            </div>
        );
    };

    return (
        <>
            <div className='ContentBody'>
                <div className="header">
                    <p>楼栋管理</p>
                </div>
                <div className='AddBtn'>
                    <Button onClick={() => {
                        setOpenAdd(true);
                    }} variant="solid" color='green' type="primary">添加</Button>
                </div>
                <Tree
                    showLine
                    switcherIcon={<DownOutlined />}
                    defaultExpandedKeys={['0-0-0']}
                    treeData={treeData}
                    titleRender={titleRender}
                />
                <AddDiaLog editContent={editContent} openAdd={openAdd} refresh={refresh} />
                {/* 添加子节点 */}
                <AddChild paraentData={paraentData} openAddChild={openAddChild} refreshChild={refreshChild} />
            </div>
        </>
    )
}

export default building